<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">

	<ui:composition>
		<banner>
        <div class="row-3">        	
            <div class="wrapper">
                <div class="col-1">
                	<div class="wrapper">
                    	<ul class="tabs">
                        	<li class="active"><a href="#tab1">Used cars </a></li>
                            <li><a href="#tab2">New cars</a></li>
                        </ul>
                        <div class="tab_container">
	                    	<div style="display: block;" id="tab1" class="tab_content">
                            <div class="padding_container">
                            	<h:form id="form-1">
                                	<fieldset>
                                    	<label>
                                        	Make<br/>
                                        	<h:selectOneListbox value="#{invCtrl.makeId}" size="1" >
                                        		<f:selectItems value="#{invCtrl.makes}"/>
                                        		<f:ajax event="change" render="Model searchUsed" execute="@this"/>
                                        	</h:selectOneListbox>                                            
                                        </label>
                                        <label>
                                        	Model<br/>
                                            <h:selectOneListbox id="Model" value="#{invCtrl.modelId}" size="1" disabled="#{invCtrl.makeId == null}">
                                        		<f:selectItems value="#{invCtrl.models}"/>
                                        		<f:ajax event="change" render="searchUsed"/>
                                        	</h:selectOneListbox>
                                        </label>
                                        <label>
                                        	Year<br/>
                                            <h:selectOneListbox value="#{invCtrl.year}" size="1">
                                        		<f:selectItems value="#{invCtrl.years}"/>
                                        		<f:ajax event="change" render="searchUsed"/>
                                        	</h:selectOneListbox>
                                        </label>
                                        <label>
                                        	Price<br/>
                                            <h:selectOneListbox value="#{invCtrl.price}" size="1">
                                        		<f:selectItems value="#{invCtrl.prices}"/>
                                        		<f:ajax event="change" render="searchUsed"/>
                                        	</h:selectOneListbox>
                                        </label>
                                        <h:link id="searchUsed" styleClass="button" value="search" outcome="/pub/inv/invList">
                                        	<f:param name="makeId" value="#{invCtrl.makeId}"/>
                                        	<f:param name="modelId" value="#{invCtrl.modelId}"/>
                                        	<f:param name="year" value="#{invCtrl.year}"/>
                                        	<f:param name="price" value="#{invCtrl.price}"/>   
                                        	<f:param name="cond" value="101"/>                                     	
                                        </h:link>
                                    </fieldset>
                                </h:form>                                
                                </div>
                            </div>
                            <div style="display: none;" id="tab2" class="tab_content">
                            	<div class="padding_container">
                            	<h:form id="form-2">
                                	<fieldset>
                                    	<label>
                                        	Make<br/>
                                        	<h:selectOneListbox value="#{invCtrl.makeId}" size="1" >
                                        		<f:selectItems value="#{invCtrl.makes}"/>
                                        		<f:ajax event="change" render="Model1 searchNew" execute="@this"/>
                                        	</h:selectOneListbox>                                            
                                        </label>
                                        <label>
                                        	Model<br/>
                                            <h:selectOneListbox id="Model1" value="#{invCtrl.modelId}" size="1" disabled="#{invCtrl.makeId == null}">
                                        		<f:selectItems value="#{invCtrl.models}"/>
                                        		<f:ajax event="change" render="searchNew"/>
                                        	</h:selectOneListbox>
                                        </label>
                                        <label>
                                        	Year<br/>
                                            <h:selectOneListbox value="#{invCtrl.year}" size="1">
                                        		<f:selectItems value="#{invCtrl.years}"/>
                                        		<f:ajax event="change" render="searchNew"/>
                                        	</h:selectOneListbox>
                                        </label>
                                        <label>
                                        	Price<br/>
                                            <h:selectOneListbox value="#{invCtrl.price}" size="1">
                                        		<f:selectItems value="#{invCtrl.prices}"/>
                                        		<f:ajax event="change" render="searchNew"/>
                                        	</h:selectOneListbox>
                                        </label>
                                        <h:link id="searchNew" styleClass="button" value="search" outcome="/pub/inv/invList">
                                        	<f:param name="makeId" value="#{invCtrl.makeId}"/>
                                        	<f:param name="modelId" value="#{invCtrl.modelId}"/>
                                        	<f:param name="year" value="#{invCtrl.year}"/>
                                        	<f:param name="price" value="#{invCtrl.price}"/>  
                                        	<f:param name="cond" value="100"/>                                        	                                      	
                                        </h:link>
                                    </fieldset>
                                </h:form>                                
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-2">
                	<div class="slider-wrapper theme-default">
                		<div id="slider" class="nivoSlider">
                			<ui:repeat var="car" value="#{hmpCtrl.carsForBanner}">
                				<h:graphicImage value="/img/?imgId=#{car.bannerImage.imageId}" title="##{car.vehicleId}"/>	                			
             				</ui:repeat>
						</div>
						<ui:repeat var="car" value="#{hmpCtrl.carsForBanner}">
							<div id="#{car.vehicleId}" class="nivo-html-caption">
								<strong>#{car.make.name} #{car.model.name}</strong><br/>
								Price: $#{car.salePrice}<br/>
								Mileage: #{car.mileage} <h:link outcome="/pub/inv/invDisplay?carId=#{car.vehicleId}&amp;backTo=Home Page"><strong>More Features</strong></h:link>	
							</div>
						</ui:repeat>
					</div>					
                </div>                	  
            </div>            
        </div>
    </banner>		
	</ui:composition>
</html>